<template>
    <div class="repayment">
        <div class="repaymentTop">
            Hóa đơn trả nợ
        </div>

        <div class="tip">
            <img src="@/assets/tipIcon2.png" alt="">
            <p>lưu ý : không thanh toán cho bất cứ tài khoản cá nhân nào</p>
        </div>

        <div class="repaymentContentWapper">
            <div class="bgColor"></div>
            <div class="repayContent">
                <div class="moneyWapper">
                    <div class="moneyTitle">Số tiền cần thanh toán(₫)</div>
                    <div class="money">{{ repaymentMoney.toLocaleString() }}</div>
                </div>
                <div class="repaymentDetail" @click="() => showDialog = !showDialog">
                    <p>Chi tiết thanh toán</p>
                    <img src="@/assets/jiantou_right.png" alt="">
                </div>

                <div class="repayData">
                    <div class="dataItem">
                        <p class="dataName">Số tài khoản đã nhận tiền</p>
                        <p class="dataValue">{{ formatString(orderDetailInfo.bankCard) }}</p>
                    </div>
                    <div class="dataItem">
                        <p class="dataName">Ngày cần thanh toán</p>
                        <p class="dataValue">{{ orderDetailInfo.repayDateTime }}</p>
                    </div>
                    <div class="dataItem">
                        <p class="dataName">Trạng thái</p>
                        <p class="dataValue">{{ orderDetailInfo.orderStatusName }}</p>
                    </div>
                </div>

                <div class="repaymentBtn" @click="toRepay">
                    Thanh toán ngay lập tức
                </div>

                <p class="toDeferBtn" v-if="orderDetailInfo.canExtend == '0'" @click="toDeferPage">
                    Gia hạn
                </p>
            </div>
        </div>

        <!-- <div class="refreshBtn">
            img
        </div> -->

        <div class="detailDialog" v-if="showDialog">
            <div class="detailContent">
                <div class="detailTitle">Chi tiết thanh toán</div>
                <div class="detailDialogData">
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Số tiền giải ngân</p>
                        <p class="dialogdataValue">{{ orderDetailInfo.actualIncome }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Lãi xuất</p>
                        <p class="dialogdataValue">{{ orderDetailInfo.financeCharge }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí báo cáo tín dụng</p>
                        <p class="dialogdataValue">{{ orderDetailInfo.creInvestFee }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí thanh toán</p>
                        <p class="dialogdataValue">{{ orderDetailInfo.channelFee }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí phục vụ</p>
                        <p class="dialogdataValue">{{ orderDetailInfo.serviceFee }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí quá hạn</p>
                        <p class="dialogdataValue">{{ orderDetailInfo.delayedFee }}₫</p>
                    </div>

                </div>
                <div class="dialogConfirmBtn" @click="() => showDialog = !showDialog">
                    Đã hiểu
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang='ts'>
import api from '@/api';
import { useOverAllStore } from '@/stores/overAll';
import { getItem } from '@/utils/token-utils';
import { Toast } from 'tdesign-mobile-vue';
import { onMounted, ref, watch, watchSyncEffect } from 'vue';
import { useRouter } from 'vue-router';
import { formatString } from '@/utils/toolsUtils'

const router = useRouter()
let overAllStore = useOverAllStore()
let orderId = ref(router.currentRoute.value.query.OrderIdOfHome)

let repaymentMoney = ref(Number(overAllStore.homeScreensData.repayModule.repayAmt))



let showDialog = ref(false)


const initOrderDetail = () => ({
    actualIncome: '',
    bankCard: '',
    canExtend: '',
    channelFee: '',
    creInvestFee: '',
    delayedDate: '',
    delayedFee: '',
    financeCharge: '',
    helpDeskCell: '',
    loanOrderId: '',
    loanOrderStatus: '',
    loanTerm: '',
    orderStatusName: '',
    repayAmt: '',
    repayDateTime: '',
    salesTax: '',
    serviceFee: '',
})

let orderDetailInfo = ref(initOrderDetail())



watch(() => overAllStore.homeScreensData, (newValue, oldValue) => {
    if (newValue && newValue.scienFlag == '14') {
        repaymentMoney.value = Number(newValue.repayModule.repayAmt)
    }
})

const toRepay = async () => {
    try {
        let checkedStatusRes = (await api.checkRepayStatus({
            uuid: getItem('uuid'),
            loanOrderId: orderId.value
        })).data


        if (checkedStatusRes.code == '0') {
            let res = (await api.applyToRePayMent({
                uuid: getItem('uuid'),
                token: getItem('token'),
                paymentType: '0',
                rpyMap: {
                    [`${orderId.value}`]: orderDetailInfo.value.repayAmt
                }
            })).data

            if (res.code == '0') {
                router.push({
                    path:'/payment',
                    query:{
                        linkUrl:res.data.redirectTo
                    }
                })
            } else {
                Toast({
                    message: res.message,
                    duration: 3 * 1000
                })
            }
        } else {
            router.replace({
                path: '/home',
            })
        }
    } catch (error) {
        console.log(error);

    }
}


const toDeferPage = () => {
    router.push({
        path: '/defer',
        query: {
            'OrderIdOfHome': orderId.value as string
        }
    })
}

const getOrderDetailInfo = async () => {
    try {
        let res = (await api.getOrderDetail({
            uuid: getItem('uuid'),
            token: getItem('token'),
            loanOrderId: orderId.value
        })).data
        if (res.code == '0') {
            orderDetailInfo.value = res.data
        } else {
            Toast({
                message: res.message,
                duration: 3 * 1000
            })
            router.replace({
                path: '/home'
            })
        }
    } catch (error) {
        console.log(error)
    }
}

onMounted(() => {
    if (!overAllStore.homeScreensData.scienFlag) {
        overAllStore.getHomeScreenStoreHandler({
            uuid: getItem('uuid'),
            token: getItem('token')
        })
    }
    getOrderDetailInfo()
})
</script>

<style scoped>
.repayment {
    height: 100%;

    .detailDialog {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;

        .detailContent {
            width: 85%;
            background-color: white;
            border-radius: .6rem;
            padding: 1rem;

            .detailTitle {
                font-family: SF Pro, SF Pro;
                font-weight: 600;
                font-size: 18px;
                color: #292B33;
                line-height: 26px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin-bottom: .8rem;
            }

            .dialogDataItem {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: .6rem;

                font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: .7rem;
                color: #9599A6;
                line-height: 1.1rem;
                text-align: left;
                font-style: normal;
                text-transform: none;

                .dialogdataValue {
                    color: #292B33;
                }
            }

            .dialogConfirmBtn {

                height: 2.2rem;
                background-color: #009959;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: .2rem;

                /* font-family: SF Pro, SF Pro; */
                font-weight: 600;
                font-size: .8rem;
                color: #FFFFFF;
                line-height: 1.2rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }



    }

    .repaymentTop {
        width: 100%;
        min-height: 2.3rem;
        display: flex;
        justify-content: center;
        align-items: center;

        font-family: SF Pro, SF Pro;
        font-weight: 600;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 26px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        background-color: #009959;
    }

    .tip {
        background-color: #FFF7EB;
        padding: .35rem .6rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        &>img {
            display: block;
            width: .8rem;
            height: .8rem;
            margin-right: .15rem;
        }

        &>p {
            /* font-family: SF Pro, SF Pro; */
            font-weight: 400;
            font-size: .6rem;
            color: #FF9326;
            /* line-height: 1.1rem; */
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .repaymentContentWapper {
        width: 100%;
        height: calc(100% - 2.3rem - 1.7rem - 2.75rem);
        overflow: scroll;
        background-color: #F7F7FA;
        position: relative;
        z-index: 0;
        padding: 20px;

        .bgColor {
            /* width: 100%; */
            height: 15rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            z-index: -1;
            background: linear-gradient(360deg, rgba(0, 179, 105, 0) 0%, #009959 100%);
        }

        .repayContent {
            /* margin: .8rem; */
            padding: .8rem;
            border-radius: .6rem;
            box-sizing: border-box;
            background-color: white;

            .moneyWapper {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: 1rem;

                .moneyTitle {
                    font-family: SF Pro, SF Pro;
                    font-weight: 400;
                    font-size: .7rem;
                    color: #9599A6;
                    line-height: 1.1rem;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }

                .money {
                    /* font-family: DIN Alternate, DIN Alternate; */
                    font-weight: bold;
                    font-size: 2rem;
                    color: #292B33;
                    line-height: 2.4rem;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .repaymentDetail {
                background-color: #F7F7FA;
                border-radius: .2rem;
                padding: .6rem;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &>img {
                    display: block;
                    width: .8rem;
                    height: 16px;
                }

                &>p {
                    /* font-family: SF Pro, SF Pro; */
                    font-weight: 400;
                    font-size: .7rem;
                    color: #626673;
                    line-height: 1.1rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .repayData {

                .dataItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 12px;

                    font-family: SF Pro, SF Pro;
                    font-weight: 400;
                    font-size: 14px;
                    color: #9599A6;
                    line-height: 22px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;

                    .dataValue {
                        color: #292B33;
                    }
                }
            }

            .repaymentBtn {
                height: 2.4rem;
                border-radius: 1.2rem;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 1rem;
                margin-bottom: .8rem;
                background: linear-gradient(94deg, #F9A848 0%, #F7941D 100%);
                /* font-family: SF Pro, SF Pro; */
                font-weight: 600;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 26px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .toDeferBtn {
                /* font-family: SF Pro, SF Pro; */
                font-weight: 600;
                font-size: .7rem;
                color: #9599A6;
                line-height: 1.1rem;
                text-align: center;
                font-style: normal;
                text-decoration-line: underline;
                text-transform: none;
            }
        }
    }


}
</style>